<template>
  <div class="content">
    
    <div class="setting">
      <el-table :data="tabledatas"
        border
        row-key="id"
        ref="singleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        @click.native="handleCurrent"
        align="left">
        <el-table-column
          prop="id"
          label="序号"
          width="60 ">
        </el-table-column>
        <el-table-column label="表头文字" width="150" >
          <template slot-scope="scope">
            <el-input  placeholder="必填" v-show="scope.row.show" v-model="scope.row.tab1"></el-input>
            <span v-show="!scope.row.show">{{scope.row.tab1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tab2"
          label="数据源"
          width="180">
        </el-table-column>
        <el-table-column label="对应字段" width="150" placeholder="必选">
          <template slot-scope="scope">
            <el-select v-model="scope.row.field">
            <el-option
              v-for="item in options"
              :key="item.field"
              :label="item.label"
              :value="item.field">
            </el-option>
          </el-select>
          </template>
        </el-table-column>
        <el-table-column label="模糊查询功能" width="150">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.query">查询此列</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="固定列设置" width="150">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.fixed">固定此列</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="组合查询运算符" width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.operator" placeholder="必选">
            <el-option
              v-for="item in operations"
              :key="item.operator"
              :label="item.label"
              :value="item.operator">
            </el-option>
          </el-select>
          </template>
        </el-table-column>
        <el-table-column label="组合查询关系" width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.relationship" placeholder="必选">
            <el-option
              v-for="item in relations"
              :key="item.relationship"
              :label="item.label"
              :value="item.relationship">
            </el-option>
          </el-select>
          </template>
        </el-table-column>
      </el-table>
      <button @click="ceshi">保存</button>
      <button @click="add">添加</button>
      
    </div>
    <tabs  class="attribute" v-model="activeName">
        <pane label="标签一" name="1">
          <div >
            <div class="attribute_header">
              <h4>表格高级属性</h4>
            </div>
            <div class="attribute_body">
              <div class="operation">
                <div class="operation_header">
                  <el-checkbox :indeterminate="OperationAll" v-model="checkAll" @change="OperationchangeAll">启用 “操作列”</el-checkbox>
                </div>
                <el-divider content-position="left">操作列配置</el-divider>
                <el-checkbox-group class="operation_body" v-model="checkedOperation" @change="Operationchange">
                  <el-checkbox style="margin-right:0px;" v-for="item in checkes" :label="item" :key="item">{{item}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="Fuzzy_query">
                  <el-checkbox  v-model="Fuzzyquery" style="display:flex;">启用 “模糊查询”</el-checkbox>
                  <el-divider content-position="left">提示文本配置</el-divider>
                  <el-input
                    placeholder="请输入内容"
                    v-model="Fuzzyqueryinput"
                    type="textarea"
                    :rows="2">
                  </el-input>
              </div>
              <div class="Fuzzy_query">
                <el-checkbox  v-model="Combinedquery" style="display:flex;">启用 “组合查询”</el-checkbox>
              </div>
              <div class="operation">
                <div class="operation_header">
                  <el-checkbox :indeterminate="tollAll" v-model="checkAlltoll" @change="toolchangeAll">启用 “工具栏”</el-checkbox>
                </div>
                <el-divider content-position="left">工具栏配置</el-divider>
                <el-checkbox-group class="operation_body" v-model="checkedtoll" @change="tollchange">
                    <el-checkbox style="margin-right:0px;"  v-for="item in tollcheckes" :label="item" :key="item">{{item}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </pane>
        <pane label="标签二" name="2">
          标签二内容
        </pane>
        <pane label="标签三" name="3">
          标签三内容
        </pane>
      </tabs>
      <slot></slot>
  </div>
</template>
<script>
import Tabs from '../components/tabs/tabs'
import pane from '../components/tabs/pane'
const Ocloumn = ['查询', '编辑', '删除'];
const tollcloumn = ['添加', '导入', '导出', '打印'];
export default {
  name:'tablesetting',
  components: {
    Tabs,
    pane
  },
  data() {
    return {
      //表单数据存放
      tabledatas: [
        {id:'1', tab1: '111', tab2: '2222', show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
        {id:'2', tab1: 'aaa', tab2: 'bbb' , show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
        {id:'3', tab1: '111', tab2: '2222', show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
        {id:'4', tab1: 'aaa', tab2: 'bbb' , show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
        {id:'5', tab1: '111', tab2: '2222', show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
        {id:'6', tab1: 'aaa', tab2: 'bbb' , show:true, field: '', query:false, fixed:false, operator:'', relationship:''},
      ],
      //对应字段
      options: [{
          field: '1',
          label: '学号'
        }, {
          field: '2',
          label: '姓名'
        }, {
          field: '3',
          label: '性别'
        }, {
          field: '4',
          label: '嘿嘿'
        }, {
          field: '5',
          label: '哈哈'
      }],
      //组合查询运算符
      operations:[{
        operator: '1',
        label: '= 等于'
      },
      {
        operator: '2',
        label: '> 大于'
      },
      {
        operator: '3',
        label: '< 小于'
      }],
      //组合查询关系
      relations:[{
        relationship: 'and',
        label: 'and 与'
      },
      {
        relationship: 'or',
        label: 'or 或'
      },
      {
        relationship: 'not',
        label: 'not 非'
      }],
      //启用操作列
      checkAll: true,
      checkedOperation: ['查询', '编辑', '删除'],
      checkes: Ocloumn,
      OperationAll: false,

      //启用工具栏
      checkAlltoll: true,
      checkedtoll: ['添加', '导入', '导出', '打印'],
      tollcheckes: tollcloumn,
      tollAll: false,
      
      //表格高级属性
      Fuzzyquery: true,//模糊查询
      Combinedquery: true,//组合查询
      Fuzzyqueryinput: '',//组合查询输入
      currentRow: null,//选中的数据存放
      currentRow2:null,
      activeName: '2'//默认选中
    }
  },
  mounted() {
    
  },
  methods: {
    //启用操作列
    OperationchangeAll(val) {
        let self = this
        self.checkedOperation = val ? Ocloumn : [];
        self.OperationAll = false;
        console.log(self.checkedOperation)
      },
    Operationchange(value) {
      let self = this
      let checkedCount = value.length;
      self.checkAll = checkedCount === self.checkes.length;
      self.OperationAll = checkedCount > 0 && checkedCount < self.checkes.length;
      console.log(self.checkedOperation)
    },
    //启用工作栏
    toolchangeAll(val) {
      this.checkedtoll = val ? tollcloumn : [];
      this.tollAll = false;
      console.log(this.checkedtoll)
    },
    tollchange(value) {
      let checkedCount = value.length;
      this.checkAlltoll = checkedCount === this.tollcheckes.length;
      this.tollAll = checkedCount > 0 && checkedCount < this.tollcheckes.length;
      console.log(this.checkedtoll)
    },

    //监听选中
    handleCurrentChange(val) {
      
      this.currentRow = val;
      if(this.currentRow.field == 0){
        this.$refs.singleTable.setCurrentRow(1);
      }else{
        this.activeName = this.currentRow.field
      }

    },
    add() {
      var id = this.tabledatas.length+1
      var data ={
        id:id,
        tab1:'',
        tab2:'',
        show: true,
        value: '',
        query: false,
        fixed: false
      }
      this.tabledatas.push(data)
    },
    handleCurrent() {
      if(this.currentRow2 == null){
        console.log('第一次点击')
      }else{
        if(this.currentRow2.id == this.currentRow.id) {
          let id = this.currentRow.id -1
          this.currentRow.field =this.tabledatas[id].field
          this.activeName = this.currentRow.field
        }
      }
       this.currentRow2 = this.currentRow
    },
    ceshi() {
        console.log(this.tabledatas)
    }
  }
}
</script>
<style scoped>
.content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.attribute{
  display: flex;
  flex-direction: column;
  width: 20%;
  border: 1px solid #EBEEF5;
}
.attribute_header{
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EBEEF5;
}
.attribute_body{
  background-color: #f0f0f0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.operation{
  padding: 16px;
}
.operation_header{
  display: flex;
}

.operation_body{
  display: flex;
  flex-direction: column;
  width: 30%;
  padding: 16px;
  
}
.Fuzzy_query{
  padding: 16px;
}
.el-divider__text.is-left{
  left: 0px;
  padding: 0;
  background-color: #f0f0f0;
}
.el-tabs__nav-scroll{
  display: none;
    height: 0%;
    width: 0%;
}
/deep/ .el-input__inner{
  padding: 0;
  border-radius: 0;
}
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  padding: 0;
}
/deep/ .cell{
  padding: 0;
}
/* .body_border{
  border: 1px solid #000;
  position: relative;
  top: 16px;
}
.body_font{
  position: relative;
  top: -10px;
  left: 4px;
  width: 79px;
  font-size: 14px;
  height: 22px;
  background-color: #f0f0f0;
} */
</style>